<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>${SYSTEM_NAME}</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css?v=${FILE_VERSION}" media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css?v=${FILE_VERSION}" media="all">
	<style type="text/css">
		.layui-form-label {
			width: 115px;
		}
		.layui-input-inline{
			width: 300px !important;
		}
	</style>
</head>
<body>
	<div class="layui-fluid">
       	<div class="layui-card">
         	<div class="layui-card-body">
				<input type="hidden" id="tableName" value="${tableName}">
           		<table class="layui-table" lay-filter="tableList" id="layerTable">
				</table>
         	</div>
       	</div>
  	</div>
	<div id="editQueryColInfoBox" class="layui-form" hidden>
		<div class="layui-form-item" style="padding: 20px;">
			<div class="layui-form-item">
				<label class="layui-form-label layui-form-required">查询框标签</label>
				<div class="layui-input-inline">
					<input id="inputLabel" placeholder="请输入查询框标签"
						   class="layui-input" lay-verify="required" id="" maxlength="100">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-form-required">查询框类型</label>
				<div class="layui-input-inline">
					<select id="inputType" lay-verify="required" lay-filter="inputType">
						<c:forEach items="${queryInputTypeMap}" var="t">
							<option value="${t.key }">${t.value }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-form-item paramSelectBox">
				<label class="layui-form-label layui-form-required">系统参数(可搜索)</label>
				<div class="layui-input-inline">
					<select id="sysParam" lay-search>
						<option value="">请选择系统参数</option>
						<c:forEach items="${sysParamMap}" var="t">
							<option value="${t.key }" <c:if test="${t.key eq generatorField.paramName}">selected="selected"</c:if>>${t.value }</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-form-required">排序值</label>
				<div class="layui-input-inline">
					<input id="sort" placeholder="请输入排序值" lay-verify="required|number" type="number"
						   class="layui-input" maxlength="5">
				</div>
			</div>
		</div>
	</div>

	<script type="text/html" id="barTpl">
		{{#  if(d.queryColInfo!=null){ }}
		<a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="editQueryColInfo">编辑查询列信息</a>
		{{#  } }}
	</script>

	<script type="text/html" id="isQueryColTpl">
		<input type="checkbox" name="isQueryCol" lay-filter="isQueryCol" lay-skin="switch" lay-text="是|否"
			   data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.queryColInfo !=null ? 'checked' : '' }}>
	</script>

	<script type="text/html" id="queryColInfoTpl">
		{{#  if(d.queryColInfo!=null){ }}
			{{#  if(d.LAY_COL.field=='inputLabel' && d.queryColInfo.inputLabel!=null){ }}
				{{d.queryColInfo.inputLabel}}
			{{#  }else if(d.LAY_COL.field=='inputType' && d.queryColInfo.inputType!=null){ }}
				{{d.queryColInfo.inputTypeName}}
			{{#  }else if(d.LAY_COL.field=='sysParam' && d.queryColInfo.sysParam!=null){ }}
				{{d.queryColInfo.sysParamName}}
			{{#  }else if(d.LAY_COL.field=='sort' && d.queryColInfo.sort!=null){ }}
				{{d.queryColInfo.sort}}
			{{#  } }}
		{{#  }else{ }}
		{{#  } }}
	</script>

	<script src="${pageContext.request.contextPath}/static/js/common-2.0.0.js?v=${FILE_VERSION}"></script>
  	<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js?v=${FILE_VERSION}"></script>
  	<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/common/core-2.0.0.js?v=${FILE_VERSION}"></script>
  	<script>
  		var table;
	  	layui.use(['table', 'element', 'form'], function() {
			var form = layui.form;
			table = layui.table;
			table.render({ 
				elem : '#layerTable',
				even : "true",
				id : 'tableList',
				height: 'full-70',
				url : getContextPath() + '/sys/recycle/listForSetQueryCol',
				page : false,
				method : 'post',
				where : {
					"tableName" :$("#tableName").val()
				},
				cols : [[
					{field : 'columnName',title : "字段名称"}
					,{field : 'columnType',title : "字段类型"}
					,{field : 'columnComment',title : "字段注释"}
					,{title:"是否设置为查询列",templet: '#isQueryColTpl'}
					,{field : 'inputLabel',title : "查询框标签",templet: '#queryColInfoTpl'}
					,{field : 'inputType',title : "查询框类型",templet: '#queryColInfoTpl'}
					,{field : 'sysParam',title : "系统参数名称",templet: '#queryColInfoTpl'}
					,{field : 'sort',title : "查询框排序",templet: '#queryColInfoTpl'}
					,{fixed: 'right', width:200, align:'center',title:"操作", toolbar: '#barTpl'}
				]]
			});
			//监听工具条
			table.on('tool(tableList)', function(obj) {
				var data = obj.data;
				if (obj.event === 'editQueryColInfo') {
					editQueryColInfo(data);
				}
			});

			form.on('switch(isQueryCol)', function (data) {
				var isChecked=data.elem.checked;
				var isQueryCol= data.elem.checked?'1':'0';
				var rowData = JSON.parse(decodeURIComponent($(this).data('json')));
				if(isQueryCol=="0"){
					layer.open({
						content: '确定修改为‘否’吗？修改后原有的查询列配置信息将被清空，请谨慎选择。'
						,btn: ['确定', '取消']
						,yes: function(){
							setQueryCol(rowData, isQueryCol);
						}
						,btn2: function(index){
							data.elem.checked=!isChecked;
							form.render();
							layer.close(index);
						}
						,cancel: function(){
							data.elem.checked=!isChecked;
							form.render();
						}
					});
				}else{
					setQueryCol(rowData, isQueryCol);
				}
			});
		});

		layui.form.on('select(inputType)', function(data){
			initParamSelectShow(data.value);
		});

		function reload() {
			table.reload('tableList',{
				where:{
					"tableName" :$("#tableName").val()
				}
			});
		}
	  	function setQueryCol(rowData, isQueryCol){
			$ajax({
				url: '/sys/recycle/setQueryColInfo',
				data :  {
					tableName :$("#tableName").val(),
					columnName : rowData.columnName,
					columnComment : rowData.columnComment,
					isQueryCol : isQueryCol
				},
				succCallback: function (json) {
					if(json.code == 0) {
						layer.msg("设置成功");
						reload();
					}
				}
			});
		}

		function editQueryColInfo(data){
			var info= data.queryColInfo;
			var inputType= null;
			if(info!=null){
				inputType= info.inputType;
				if(info.inputLabel!=null) {
					$("#inputLabel").val(info.inputLabel);
				}
				if(info.sysParam!=null) {
					$("#sysParam").val(info.sysParam);
				}
				$("#inputType").val(inputType);
				$("#sort").val(info.sort);
			}
			initParamSelectShow(inputType);
			layer.open({
				title: '编辑查询列信息',
				area: ['540px', '80%'],
				btn: ['保存'],
				type: 1, //页面层(不加的话return照样关闭弹窗)
				yes: function(index){
					var inputLabel=$("#inputLabel").val();
					var inputType=$("#inputType").val();
					var sysParam=$("#sysParam").val();
					var sort=$("#sort").val();
					if(!inputLabel){
						layer.msg('查询框标签不能为空！');
						return;
					}else if(!inputType){
						layer.msg('查询框类型不能为空！');
						return;
					}else if(inputType== '4' && !sysParam){
						layer.msg('系统参数不能为空！');
						return;
					}else if(!sort){
						layer.msg('排序值不能为空！');
						return;
					}
					var queryColInfo={
						inputLabel: inputLabel,
					    inputType: inputType,
						sort: sort
					};
					if(inputType=='4'){
						queryColInfo.sysParam= sysParam;
					}

					$ajax({
						url: '/sys/recycle/editQueryColInfo',
						data :  {
							tableName :$("#tableName").val(),
							columnName : data.columnName,
							queryColInfo: JSON.stringify(queryColInfo)
						},
						isShowLayer:false,
						succCallback: function (json) {
							if(json.code == 0) {
								reload();
								layer.msg("保存成功",{icon: 1});
								layer.close(index);
							}else{
								layer.msg("保存失败",{icon: 2});
							}
							//解决问题：关闭后会追加到父页面底下，奇怪，估计因为父页面也是弹窗吧
							$('#editQueryColInfoBox').hide();
						}
					});
				},
				cancel: function () {
					//解决问题：关闭后会追加到父页面底下，奇怪，估计因为父页面也是弹窗吧
					$('#editQueryColInfoBox').hide();
				},
				content:$('#editQueryColInfoBox')
			});
		}

		function initParamSelectShow(inputType){
			if (inputType == '4') {//系统参数选择框
				$(".paramSelectBox").css("display","");
			} else{
				$(".paramSelectBox").css("display","none");
			}
		}
  	</script>
</body>
</html>
